<template>
<el-container>
  <el-header>商品列表</el-header>
  <el-main>    
       <el-table :data="tableData"  height="250" border  style="width: 100%"> 
    <el-table-column   prop="id"   label="id"   width="180">
    </el-table-column>
    <el-table-column   prop="name"   label="名称"  width="180">
    </el-table-column>
    <el-table-column  prop="price"  label="价格">
    </el-table-column>
     <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button  size="mini" type="primary"
          @click="handleEdit( scope.row)">加入购物车</el-button>
      </template>
    </el-table-column>
  </el-table></el-main>
</el-container>
 

</template>

<script>
import {mapGetters,mapActions} from "vuex";
export default {
  data() {
    return { };
  },
  computed:{
    //   ...mapGetters(['tableData'])
    ...mapGetters({
        tableData:'tableData'
     })
  },

  methods: {
      ...mapActions([
          'handleEdit'
      ])
  }
};
</script>